<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的异步请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="div">
        <input type="button" value="发送get请求方式1" @click="doGet1()">
        <input type="button" value="发送get请求方式2" @click="doGet2()">
        <input type="button" value="发送post请求方式1" @click="doPost1()">
        <input type="button" value="发送post请求方式2" @click="doPost2()">
    </div>
    <script>
        new Vue({
            el:"#div",
            data:{
                user:{
                    username:"rose",
                    password:123
                }
            },
            methods:{
                // <input type="button" value="发送get请求方式1" @click="doGet1()">
                doGet1(){
                    axios.get("ajaxServlet?username=jack&password=123456").then((resp)=>{
                        console.log(resp);
                        //获取响应回来的数据
                        console.log(resp.data);
                    }).catch((error)=>{
                        //信息红色字体显示
                        console.error(error);
                    });
                },
                // <input type="button" value="发送get请求方式2" @click="doGet2()">
                /*底层原理：axios底层会获取get方法参数二中对象的params属性值，
                将属性值中的对象转换成name=value&name=value&...格式的参数拼接到url地址后发送给服务器*/
                doGet2(){
                    axios.get("ajaxServlet",{params:this.user}).then((resp)=>{
                        console.log(resp);
                        console.log(resp.data);
                    }).catch((error)=>{
                        //信息红色字体显示
                        console.error(error);
                    });
                },
                // <input type="button" value="发送post请求方式1" @click="doPost1()">
                doPost1(){
                    axios.post("ajaxServlet","username=snake&password=2021").then((resp)=>{
                      //处理成功的响应数据
                      console.log(resp);
                      console.log(resp.data);
                    }).catch((error)=>{
                        //信息红色字体显示
                        console.error(error);
                    });
                },
                // <input type="button" value="发送post请求方式2" @click="doPost2()">
                doPost2(){
                    axios.post("ajaxServlet",this.user).then((resp)=>{
                        console.log(resp);
                        console.log(resp.data);
                    })
                }
            }
        });
    </script>
</body>
</html>